<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>模板语法—指令</title>
    <script src="./lib/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <!--    插入/移除 <p> 元素  start-->
    <p v-if="seen">现在你看到我了</p>
    <!--    插入/移除 <p> 元素  end-->
    <!--  参数 start  在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性 与表达式 url 的值绑定-->
    <a v-bind:href="url">Vue官网</a>
    <!--  参数 end  -->
    <!--  修饰符 start  .stop 修饰符意思是click2执行完后停止，不会再继续执行click1-->
    <div @click="click1">
        <div @click.stop="click2">
            click me
        </div>
    </div>
    <!--  修饰符 end  -->
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            seen: false,
            url: "https://cn.vuejs.org/"
        },
        methods: {
            click1: function () {
                console.log('click1......');
            },
            click2: function () {
                console.log('click2......');
            }
        }
    });
</script>
<style type="text/css">

</style>
</body>
</html>
